<template>
	<view class="app-container">
		<div class="month">
			<span>{{dateTime | date('mm')}}</span>
			<span :class="isShow ? 'active' : ''" @click="onClick">月份</span>
		</div>
		<div class="record-list">
			<div class="record-item" v-for="item in list" :key="item.id">
				<div>
					<image src="/static/icons/weixin.svg" mode=""></image>
					<div>
						<h4>{{item.statusStr}}</h4>
						<p class="datetime">{{item.updatedAt | date('mm-dd hh:MM:ss')}}</p>
					</div>
				</div>
				<div v-if="isSuccess">
					<div>{{item.amount}}</div>
					<div class="fail-desc">提现失败，已退回余额</div>
				</div>
				<div v-else style="line-height: 36px">
					<div>{{item.amount}}</div>
				</div>
			</div>
		</div>
		<u-datetime-picker :show="show" v-model="dateTime" mode="date" @confirm="onConfirm" @cancel="onCancel">
		</u-datetime-picker>
	</view>
</template>

<script>
	import {
		withdrawRecord
	} from '@/api/api.js'
	export default {
		data() {
			return {
				isShow: false,
				dateTime: Number(new Date()),
				show: false,
				isSuccess: false,
				list: []
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				console.log(this.$u.timeFormat(this.dateTime, 'yyyy年mm月dd日'));
				withdrawRecord({dateTime:this.dateTime}).then(res => {
					if (res.code === 10000) {
						this.list = res.data
					}
				})
			},
			onClick() {
				this.isShow = this.show = true
			},
			onCancel() {
				this.isShow = this.show = false
			},
			onConfirm(date) {
				this.dateTime=date.value
				this.init()
				this.isShow = this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.month {
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #d8d8d8;
		margin-bottom: 14px;

		span:first-child {
			font-size: 18px;
			margin-right: 12px;
		}

		span {
			font-size: 12px;
			position: relative;

			&:last-child:after {
				content: '';
				display: block;
				position: absolute;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-top: 4px solid #000;
				right: -10px;
				top: 6px;
				transition: all 0.3s;
			}

			&:last-child.active:after {
				transform: rotateX(180deg);
			}
		}
	}

	.record-list {
		.record-item {
			display: flex;
			justify-content: space-between;
			height: 36px;
			margin-bottom: 14px;

			image {
				width: 32px;
				height: 32px;
				margin-top: 2px;
			}

			>div:first-child {
				display: flex;
				justify-content: flex-start;

				>div {
					margin-left: 8px;
				}

				h4 {
					font-size: 14px;
					line-height: 20px;
				}

				p {
					font-size: 12px;
					color: #656565;
					line-height: 16px;
				}
			}

			>div:last-child {
				text-align: right;

				>div:first-child {
					font-size: 14px;
				}
			}

			.fail-desc {
				font-size: 10px;
				color: #656565;
			}
		}
	}
</style>
